<template>
  <div>
    <div class="titlelist6_10 titles">我的信息 / 实名</div>
    <div class="content">
      <div class="title">实名信息</div>
      <div class="boxer1">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="机构名称">
            <el-input
              :disabled="true"
              style="width: 350px"
              v-model="officeName"
              readonly="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="用户类型">
            <el-select
              class="selects"
              v-model="form.centerType"
              placeholder="请选择"
            >
              <el-option label="公司" value="1"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="营业执照号">
            <el-input
              :disabled="disable"
              style="width: 350px"
              :maxlength="licenseNameMaxLength"
              @input="value=>form.organizCode=value.replace(/[^\w]/ig,'')"
              v-model="form.organizCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人姓名">
            <el-input
              :disabled="true"
              style="width: 350px"
              :maxlength="name"
              v-model="form.master"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人证件号">
            <el-input
              :disabled="disable"
              style="width: 350px"
              :maxlength="cardId"
              @input="value=>{form.legalPersonIdCard=value=value.replace(/[^\w\.\/]/ig,'')}"
              v-model="form.legalPersonIdCard"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="实名状态">
          <el-input style="width: 350px" v-model="name"></el-input>
        </el-form-item> -->
          <div style="clear: both"></div>
          <el-form-item label="经营范围">
            <el-input
              :disabled="disable"
              type="textarea"
              style="width: 850px"
              :maxlength="rangeTxtNum"
              v-model="form.mccCont"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="clear: both"></div>
      </div>
      <div class="title">银行卡</div>
      <div class="boxer1">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="账户类型">
            <el-select
              :disabled="disable"
              class="selects"
              @change="cardChange"
              v-model="form.cardType"
              placeholder="请选择"
            >
              <el-option label="对公" value="1"></el-option>
              <el-option label="对私" value="2"></el-option>
            </el-select>
          </el-form-item>
          <div style="clear: both"></div>
          <el-form-item label="账户名称">
            <el-input
              :disabled="true"
              style="width: 350px"
              v-model="form.custName"
              :maxlength="nameLength"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户账号">
            <el-input
              style="width: 350px"
              @input="value=>{form.accountNo=value.replace(/\D/g,'')}"
              :maxlength="accountMaxNumber"
              v-model="form.accountNo"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户手机号">
            <el-input
              style="width: 350px"
              @input="value=>{form.principalPhone=value.replace(/\D/g,'')}"
              :maxlength="phoneLength"
              v-model="form.principalPhone"
            ></el-input>
          </el-form-item>
          <!-- <div style="clear: both"></div> -->
          <el-form-item label="开户银行">
            <el-select
              filterable
              v-model="form.bankCode"
              @change="bankChange"
              class="selects"
              placeholder="请选择"
            >
              <el-option
                v-for="item in bankNameArr"
                :key="item.bankCode"
                :label="item.bankName"
                :value="item.bankCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开户地区">
            <el-select
              v-model="form.openProvince"
              @change="selectProvince"
              placeholder="请选择"
              class="ads"
            >
              <el-option
                v-for="item in provinceArr"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.openCity"
              @change="selectCity"
              placeholder="请选择"
              class="ads"
            >
              <el-option
                v-for="item in cityArr"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开户支行">
            <el-select
              v-model="form.openBankCode"
              placeholder="请选择"
              class="selects"
              filterable 
            >
              <el-option
                v-for="item in bankNameArr2"
                :key="item.subCode"
                :label="item.subName"
                :value="item.subCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="clear: both"></div>
      </div>
      <div class="title">资质</div>
      <div class="boxer1" style="padding-left: 50px">
        <!-- 营业执照 -->
        <div v-if="form.cardType=='1'" style="float: left; margin-left: 20px">
          <el-upload
          :disabled="disable"
            :class="uploadDisabled"
            :action="httpurl + '/api/fileUpload'"
            list-type="picture-card"
            :file-list="imgData4"
            :limit="1"
            name="file"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            :before-upload="beforeUpload"
            :on-success="handleSuccess4"
            :on-preview="handlePictureCardPreview4"
            :on-remove="handleRemove4"
            :on-error="handleFail"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible4">
            <img width="100%" :src="dialogImageUrl4" alt="" />
          </el-dialog>
          <p>营业执照</p>
        </div>
        <!-- 开户许可证 -->
        <div v-if="form.cardType=='1'" style="float: left; margin-left: 20px">
          <el-upload
          :disabled="disable"
            :class="uploadDisabled5"
            :action="httpurl + '/api/fileUpload'"
            list-type="picture-card"
            :file-list="imgData5"
            :limit="1"
            name="file"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            :before-upload="beforeUpload"
            :on-success="handleSuccess5"
            :on-preview="handlePictureCardPreview5"
            :on-remove="handleRemove5"
            :on-error="handleFail"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible5">
            <img width="100%" :src="dialogImageUrl5" alt="" />
          </el-dialog>
          <p>开户许可证</p>
        </div>
        <div  style="float: left; margin-left: 20px">
          <el-upload
          :disabled="disable"
            :class="uploadDisabled6"
            :action="httpurl + '/api/fileUpload'"
            list-type="picture-card"
            :file-list="imgData6"
            :limit="1"
            name="file"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            :before-upload="beforeUpload"
            :on-success="handleSuccess6"
            :on-preview="handlePictureCardPreview6"
            :on-remove="handleRemove6"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <p>身份证正面</p>
          <el-dialog :visible.sync="dialogVisible6">
            <img width="100%" :src="dialogImageUrl6" alt="" />
          </el-dialog>
        </div>
        <div style="float: left; margin-left: 20px">
          <el-upload
          :disabled="disable"
            :class="uploadDisabled7"
            :action="httpurl + '/api/fileUpload'"
            list-type="picture-card"
            :file-list="imgData7"
            :limit="1"
            name="file"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            :before-upload="beforeUpload"
            :on-success="handleSuccess7"
            :on-preview="handlePictureCardPreview7"
            :on-remove="handleRemove7"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible7">
            <img width="100%" :src="dialogImageUrl7" alt="" />
          </el-dialog>
          <p>身份证反面</p>
        </div>
        <div v-if="form.cardType=='2'" style="float: left; margin-left: 20px" >
          <el-upload
          :disabled="disable"
            :class="uploadDisabled8"
            :action="httpurl + '/api/fileUpload'"
            list-type="picture-card"
            :file-list="imgData8"
            :limit="1"
            name="file"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            :before-upload="beforeUpload"
            :on-success="handleSuccess8"
            :on-preview="handlePictureCardPreview8"
            :on-remove="handleRemove8"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible8">
            <img width="100%" :src="dialogImageUrl8" alt="" />
          </el-dialog>
          <p>银行卡照片</p>
        </div>
        <div v-if="form.cardType=='2'" style="float: left; margin-left: 20px" >
          <el-upload
          :disabled="disable"
            :class="uploadDisabled9"
            :action="httpurl + '/api/fileUpload'"
            list-type="picture-card"
            :file-list="imgData9"
            :limit="1"
            name="file"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            :before-upload="beforeUpload"
            :on-success="handleSuccess9"
            :on-preview="handlePictureCardPreview9"
            :on-remove="handleRemove9"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible9">
            <img width="100%" :src="dialogImageUrl9" alt="" />
          </el-dialog>
          <p>手持身份证正面照</p>
        </div>
        <div style="clear: both"></div>
      </div>
      <div class="btnGroup">
        <el-button @click="backUrl">返回</el-button>
        <el-button type="primary" @click="submits">完成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../plugins/https";
import {
  phoneLength,
  rules,
  licenseNameMaxLength,
  name,
  cardId,
  rangeTxtNum,
  nameLength,
  accountMaxNumber,
} from "../../plugins/rules";
export default {
  name: "route",
  data() {
    return {
      disable:false,
      requestType:this.$route.query.requestType?this.$route.query.requestType:"1",
      officeUid:localStorage.getItem("uid"),
      nameLength: nameLength, //账户名称
      accountMaxNumber: accountMaxNumber, //账户号
      phoneLength: phoneLength,
      licenseNameMaxLength: licenseNameMaxLength, //营业执照
      rangeTxtNum: rangeTxtNum, //经营范围
      name: name, //法人姓名
      cardId: cardId, //身份证号码
      cityArr: "", //市区集合
      httpurl: this.GLOBAL.httpurl,
      uploadDisabled: "", //营业执照
      uploadDisabled5: "", //开户许可证
      uploadDisabled6: "", //
      uploadDisabled7: "", //身份证反面
      uploadDisabled8: "", // 银行卡
      uploadDisabled9: "", // 手持卡
      legalCertBackPho: "", //身份证反面
      dialogImageUrl5: "",
      dialogVisible5: false, //开户许可证
      dialogVisible4: false, //营业执照
      dialogVisible6: false, //法人身份证正面展示
      dialogVisible7: false, //身份证反面展示
      dialogVisible8: false, //银行卡
      dialogVisible9: false, //银行卡
      openBankCode: "", //支行信息
      officeName: "", //机构名称
      //银行
      bankNameArr: "",
      // 支行
      bankNameArr2: "",
      // 获取省份
      provinceArr: "",

      // 需要上传的
      form: {
        
      master:"",
        principalPhone: "", //开户手机号
        custName: "", //账户名称
        // 账号
        accountNo: "",
        // 营业执照号
        organizCode: "",
        // 开户银行
        bankCode: "",
        // 开户地主
        openCity: "",
        // 开户城市
        type: "", //账户类型
        busLicencePho: "", //营业执照
        openAccPho: "", //开户许可证
        legalCertFrontPho: "", //身份证正面照
        legalCertBackPho: "", //身份证反面
        bankCardPho: "", // 银行卡
        certBody:"",
        openProvince: "", //开户省份
        mccCont: "",
        // centerType: "1", //用户类型
        cardType: "", //账户类型
      },
      imgData4:[],
      imgData5:[],
      imgData6:[],
      imgData7:[],
      imgData8:[],
      imgData9:[],
    };
  },
  components: {},
  mounted: function () {},
  created() {
    this.officeName = localStorage.getItem("name");
    // 获取总行
    this.getBank();
    // 获取省份
    this.getProvince();
    https.queryUpdateRealName({officeUid:this.officeUid,requestType:this.requestType}).then(res=>{
      console.log(res)
      if(res.data.code=="0000"){
        this.form=res.data.data
        if(this.requestType==2){
           this.openBranchList();
            this.getCity(this.form.openProvince);
            this.imgData4=[{ name: "", url: res.data.data.busLicencePho }]
            this.imgData5=[{ name: "", url: res.data.data.openAccPho }]
            this.imgData6=[{ name: "", url: res.data.data.legalCertFrontPho }]
            this.imgData7=[{ name: "", url: res.data.data.legalCertBackPho }]
            this.imgData8=[{ name: "", url: res.data.data.bankCardPho }]
            this.imgData9=[{ name: "", url: res.data.data.certBody }]
            this.uploadDisabled = "disabled";
            this.uploadDisabled5 = "disabled";
            this.uploadDisabled6 = "disabled";
            this.uploadDisabled7 = "disabled";
            this.uploadDisabled8 = "disabled";
            this.uploadDisabled9 = "disabled";
            this.disable=true
        }
        if(this.form.cardType=="1"){
          this.form.custName=this.form.officeName
        }else if(this.form.cardType=="2"){
          this.form.custName=this.form.master
        }
      }
    })
  },
  methods: {
    backUrl() {
      this.$router.push({
        name: "meMessage",
      });
    },
    cardChange(){
      console.log(this.form)
       if(this.form.cardType=="1"){
          this.form.custName=this.form.officeName
        }else if(this.form.cardType=="2"){
          this.form.custName=this.form.master
        }
        this.handleRemove4()
        this.handleRemove5()
        this.handleRemove6()
        this.handleRemove7()
        this.handleRemove8()
        this.handleRemove9()
      // this.imgData4=[]
      // this.imgData5=[]
      // this.imgData6=[]
      // this.imgData7=[]
      // this.imgData8=[]
      // this.imgData9=[]
      // this.busLicencePho= "" //营业执照
      // this.openAccPho= "" //开户许可证
      // this.legalCertFrontPho= "" //身份证正面照
      // this.legalCertBackPho= "" //身份证反面
      // this.bankCardPho= ""// 银行卡
    
    },
    handle(e) {
      e.target.value = rules(e.target.value, "integer");
    },
    // 身份证号码
    handleIdCard(e) {
      e.target.value = rules(e.target.value, "idCard");
    },
    // 开户账号
    handleAccunt(e) {
      e.target.value = rules(e.target.value, "integer");
    },
    // 回显数据
    echoData() {},
    // 图片上传之前
    beforeUpload(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false;
      }
    },
    // 营业执照
    handleSuccess4(res, file, fileList) {
      console.log(res);
      this.form.busLicencePho = res.data.filePath;
      if (this.form.busLicencePho.length > 0) {
        this.uploadDisabled = "disabled";
      }
      console.log(this.form);
    },
    // 上传失败处理
    handleFail(err) {
      layer.open({
        content: "图片上传失败",
        skin: "msg",
        time: 1, //1秒后自动关闭
      });
    },
    handleRemove4() {
      this.form.busLicencePho = "";
      this.uploadDisabled = "";
    },
    handlePictureCardPreview4(file) {
      this.dialogImageUrl4 = file.url;
      this.dialogVisible4 = true;
    },
    // 开户许可证
    handleSuccess5(res, file, fileList) {
      this.form.openAccPho = res.data.filePath;
      if (this.form.openAccPho.length > 0) {
        this.uploadDisabled5 = "disabled";
      }
    },
    handleRemove5() {
      this.form.openAccPho = "";
      this.uploadDisabled5 = "";
    },
    handlePictureCardPreview5(file) {
      this.dialogImageUrl5 = file.url;
      this.dialogVisible5 = true;
    },
    // 法人正面
    handleSuccess6(res, file, fileList) {
      this.form.legalCertFrontPho = res.data.filePath;
      if (this.form.legalCertFrontPho.length > 0) {
        this.uploadDisabled6 = "disabled";
      }
      console.log(this.form);
    },
    handleRemove6() {
      this.form.legalCertFrontPho = "";
      this.uploadDisabled6 = "";
    },
    handlePictureCardPreview6(file) {
      this.dialogImageUrl6 = file.url;
      this.dialogVisible6 = true;
    },
    // 法人反面照
    handleSuccess7(res, file, fileList) {
      this.form.legalCertBackPho = res.data.filePath;
      if (this.form.legalCertBackPho.length > 0) {
        this.uploadDisabled7 = "disabled";
      }
    },
    handleRemove7() {
      this.form.legalCertBackPho = "";
      this.uploadDisabled7 = "";
    },
    handlePictureCardPreview7(file) {
      this.dialogImageUrl7 = file.url;
      this.dialogVisible7 = true;
    },
    // 银行卡正照片
    handleSuccess8(res, file, fileList) {
      this.form.bankCardPho = res.data.filePath;
      if (this.form.bankCardPho.length > 0) {
        this.uploadDisabled8 = "disabled";
      }
    },
    handleRemove8() {
      this.form.bankCardPho = "";
      this.uploadDisabled8 = "";
    },
    handlePictureCardPreview8(file) {
      this.dialogImageUrl8 = file.url;
      this.dialogVisible8 = true;
    },
    // 手持照片
    handleSuccess9(res, file, fileList) {
      this.form.certBody = res.data.filePath;
      if (this.form.certBody.length > 0) {
        this.uploadDisabled9 = "disabled";
      }
    },
    handleRemove9() {
      this.form.certBody = "";
      this.uploadDisabled9 = "";
    },
    handlePictureCardPreview9(file) {
      this.dialogImageUrl9 = file.url;
      this.dialogVisible9 = true;
    },
    // 完成提交
    submits() {
      console.log("传递的数据")
      console.log(this.form)
      this.form.officeUid = localStorage.getItem("uid");
      if(this.form.cardType=="1" &&  this.form.busLicencePho == "" && this.form.certBody == ""){
        layer.open({
          content: "输入数据不能为空",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
        return
      }else if(this.form.cardType=="2" &&  this.form.bankCardPho == "" && this.form.openAccPho == ""){}
      if (
        this.form.accountNo != "" &&
        this.form.bankCode != "" &&
        this.form.bankName != "" &&
        this.form.custName != "" &&
        this.form.legalCertBackPho != "" &&
        this.form.legalCertFrontPho != "" &&
        this.form.legalPersonIdCard != "" &&
        this.form.master != "" &&
        this.form.mccCont != "" &&
        this.form.openBankCode != "" &&
        this.form.openCity != "" &&
        this.form.openProvince != "" &&
        this.form.organizCode != "" &&
        this.form.principalPhone != ""
      ) {
        if (this.form.legalPersonIdCard.length == 18) {
          https
            .authentication(this.form)
            .then((res) => {
              if (res.data.code == "0000") {
                console.log(res);
                localStorage.setItem('authenticationStatus',"0")
                this.$router.push({
                  path: "meMessage",
                });
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          layer.open({
            content: "身份证输入有误",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      } else {
        layer.open({
          content: "输入数据不能为空",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }
    },

    // 获取开户银行
    getBank() {
      https
        .queryBank({})
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            this.bankNameArr = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 银行发生了选择
    bankChange(val) {
      console.log(val);
      console.log(this.bankNameArr);
      this.form.openProvince = "";
      this.form.openCity = "";
      this.form.openBankCode = ""

      for (let i = 0; i < this.bankNameArr.length; i++) {
        console.log(this.bankNameArr[i].bankName);
        if (val == this.bankNameArr[i].bankCode) {
          this.form.bankName = this.bankNameArr[i].bankName;
          break;
        }
      }
      this.form.bankCode = val;
    },
    // 获取开户支行
    openBranchList() {
      https
        .querOpenBank({
          cityCode: this.form.openCity,
          bankCode: this.form.bankCode,
        })
        .then((res) => {
          console.log("获取的支行");
          console.log(res);
          this.bankNameArr2 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取省份
    getProvince() {
      https
        .getProvinces({})
        .then((res) => {
          console.log("省份");
          console.log(res);
          this.provinceArr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 选择省份
    selectProvince(val) {
      this.form.openCity = "";
      this.getCity(this.form.openProvince);
      return;
    },
    // 获取称试
    getCity(upCode) {
      https
        .getCity({ upCode })
        .then((res) => {
          console.log("获取出来的称试");
          console.log(res);
          this.cityArr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 选择开户城市
    selectCity(val) {
      this.openBranchList();
    },
  },
};
</script>

<style scoped>
.con {
  padding: 20px;
}
.boxer1 {
  padding: 20px;
  padding-left: 0;
}
.rangeTxt {
  display: flex;
}
.rangeTitle {
  width: 150px;
  text-align: right;
  margin-right: 12px;
}
/* /deep/ .el-input {
  width: 300px !important;
} */
/deep/ .el-input__inner {
  width: 100%;
}
.title {
  width: calc(100% - 40px);
  margin: 20px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  background: #f9fafc;
  float: left;
}
p {
  text-align: center;
  margin-top: 10px;
}
/deep/ .selects > .el-input {
  width: 350px;
}
/deep/ .ads .el-input {
  width: 173px;
}
.el-form-item {
  margin-bottom: 20px;
}
.btnGroup {
  text-align: center;
}
.crumbsNav {
  border-bottom: 1px solid #ebeef5;
  height: 36px;
  line-height: 36px;
}
</style>
<style rel="stylesheet/scss">
.disabled .el-upload--picture-card {
  display: none;
}
</style>

